<template>
  <div class="home">
    <div class="left">
      <img
        class="home-icon animate__animated animate__fadeInUp"
        src="../../assets/images/hone-icon-1.png" />
    </div>
    <div class="right">
      <div
        class="right_top animate__animated animate__fadeInRight">
        <div
          style="width: 50%"
          @click="gotoPage(1)">
          <img class="btn_img"
            :class="donghua"
            src="../../assets/images/home_icon2.png" />
        </div>
        <div
          style="width: 50%"
          @click="gotoPage(2)">
          <img class="btn_img"
            :class="donghua1"
            src="../../assets/images/home_icon1.png" />
        </div>
      </div>
      <div
        class="right_body animate__animated animate__fadeInRight">
        <div class="img_box"
          v-for="(item, index) in bannerList"
          :key="index">
          <img
            @click="gotoBannerPage(item)"
            :src="item.imgUrl"
            style="height: 100%;" />
        </div>
      </div>
    </div>
    <div class="link">
      <a href="https://m.daovic.com/#/?phone=true"
        target="_blank">
        <img
          src="https://rkk-agent.oss-cn-beijing.aliyuncs.com/1726838284447.png"
          style="width: 120px;">
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HTTP_URL } from '@/api/api'
import router from '@/router'
import axios from 'axios'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
const donghua = ref('')
const donghua1 = ref('')
const bannerList = ref([])
const store = useStore()
// const baseUrl = 'https://api.daovic.com'
const active = ref('')
onMounted(() => {
  getList()

  const days = window.localStorage.getItem('day')
  if (days && days == getYearDay()) {
    console.log('今日登录')
  } else {
    window.localStorage.removeItem('logId')
    store.commit('setLogId', '')
  }
  const token = window.localStorage.getItem('token') || store.state.token
  if (!token) {
    login()
  }
})
const getYearDay = () => {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() < 10 ? `0` + `${date.getMonth() + 1}` : date.getMonth() + 1
  var day = date.getDate()
  return year + '-' + month + '-' + day
}
const login = () => {
  axios({
    url: HTTP_URL.BASEURL + '/auth/user/login',
    method: 'post',
    data: {
      browserFingerprint: new Date().getTime()
    }
  }).then((res: any) => {
    store.commit('setToken', res.data.data.token)
    store.commit('setUserId', res.data.data.userId)
    store.commit('setUserType', res.data.data.userType)
    store.commit('setUserName', res.data.data.name)
    window.localStorage.setItem('day', getYearDay())

    window.localStorage.setItem('userId', res.data.data.userId)
    window.localStorage.setItem('token', res.data.data.token)
    window.localStorage.setItem('userType', res.data.data.userType)
    window.localStorage.setItem('name', res.data.data.name)
  })
}
const gotoBannerPage = (url: any) => {
  window.open(url.linkUrl)
}
const gotoPage = (index: Number) => {
  if (index == 1) {
    donghua.value = 'animate__animated animate__zoomIn'
  } else {
    donghua1.value = 'animate__animated animate__zoomIn'
  }
  setTimeout(() => {
    donghua.value = ''
    donghua1.value = ''

    router.push({
      path: '/chat'
    })
  }, 800)
}
const getList = () => {
  axios({
    url: HTTP_URL.BASEURL + '/base/home',
    method: 'post',
    headers: {
      token: window.localStorage.getItem('token') || store.state.token
    },
    data: {
      advertisementType: 2
    }
  }).then((res: any) => {
    bannerList.value = res.data.data.advertisementList
  })
}
</script>
<style lang="scss">
body {
  background: #000000;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.home {
  width: 100vw;
  height: 100vh;
  background-position: -40px 0px;
  background: url('../../assets/images/bg.png') 100% no-repeat;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .link a {
    color: #ffffff;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-decoration: none;
    cursor: pointer;
  }
  .left {
    width: 40vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .right {
    width: 60vw;
  }
  .left {
    width: 40vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .right {
    width: 60vw;
    height: 80vh;
    display: flex;
    justify-content: flex-start;
    flex-flow: column;
    align-items: center;
    .right_top {
      height: 30vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 5vh;
      .btn_img {
        cursor: pointer;
        margin: 0 50px;
        width: 180px;
      }
    }
    .right_body {
      border-radius: 10px;
      border: 3px solid rgba(138, 135, 115, 1);
      overflow: hidden;
      padding: 5px;
      width: 58vw;
      height: 253px;
      background: rgba(138, 135, 115, 0.5);
      color: #ffffff;
      margin-top: 40px;
      margin-left: -3vw;
      display: flex;
      justify-content: center;
      .img_box {
        cursor: pointer;
        width: calc(58vw / 6);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
        overflow: hidden;
      }
    }
  }
}
@media screen and (max-width: 1200px) {
  .home-icon {
    width: 450px;
  }
  .right {
    .right_body {
      margin-top: 36px !important;
      height: 220px !important;
    }
  }
}
</style>
